<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main{
            width: 800px;
            margin: 0 auto;
        }
        .body {
            width: 500px;
            box-sizing: border-box;
            float: left;
            margin: 0 auto;
            /* background-color: aqua; */
            display: grid;
            /* 等分割块 */
            grid-template-columns: 1fr 8fr 30fr;
            grid-gap: 0 5px;
            padding: 10px;
            border-top: 1px dotted grey;
        }
        .title{
            color: #000;
            font-size: 20px;
            font-weight: 500;
        }
        .type{
            color: #666;
        }
        .body img{
            width: 100px;
        }
        .body p{
            padding: 5px 0;
        }

        .right{
            width: 300px;height: 200px;
            float: right;
            box-sizing: border-box;
        }
        .right-bottom{
            display: flex;
            align-items: center;
        }
        .main-title{
            color: #111;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        padding-top: 20px;
        font-weight: 400;
        }
        .sub-title{
            font-size: 14px;
            padding-top: 2px;
            color: #4e4e4e;
        }
        .right-top{
            font: 12px Arial, Helvetica, sans-serif;
    line-height: 150%;
    color: #666666;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1 style="margin: 20px 0;">电影Top     250</h1>
        
    </div>
    <script>
        // 发起请求函数
        function ajax({
            method,
            url,
            success
        }) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (this.status == 200 && this.readyState == 4) {
                    var res = JSON.parse(this.responseText);
                    success(res);
                }
            }
        }
        // 广告部分的链接请求
        ajax({
            method: "get",
            url: "http://192.168.4.18:8000/ad",
            success: function (item) {
                console.log(typeof (item));
                console.log(item);
                rightHandData(item)
            }
        })
        // 请求调用
        ajax({
            method: "get",
            url: "http://192.168.4.18:8000",
            success: function (item) {
                console.log(typeof (item));
                console.log(item);
                handData(item);
            }
        })
        // 数据渲染函数
        function handData(num) {
            num.result.forEach((element, index) => {
                var labels = element.labels.join("/");
                var html = `
                        <div class="body">
                            <div>${index+1}</div>
                            <img src=${element.pic} alt="">
                            <div>
                                <p class="title">${element.title}</p>
                                <p class="type">${labels}</p>
                                <p><span style="color:#e09015;">${element.raiting}</span><span class="type">${element.evaluate}</span></p>
                                <p>"${element.slogo}"</p>
                            </div>
                        </div>
                `
                $(".main").append(html)
            });
        }
        // 广告部分数据渲染
        function rightHandData(num) {
            console.log("dw");
                var right = `
                <div class="right">
                    <div class="right-top">${num.result.title}</div>
                    <img src=${num.result.poster} alt="">
                    <div class="right-bottom">
                        <img style="width: 80px;" src=${num.result.erweima} alt="">
                        <img style="width: 80px;height: 80px;" src=${num.result.logo} alt="">
                        <div style="height: max-content;">
                            <span class="main-title">${num.result.labels[1]}</span><br>
                            <span class="sub-title">${num.result.labels[2]}</span>
                        </div>
                    </div>
                </div>
                `
                $(".main").append(right)
        }
    </script>
</body>

</html>